<template>
  <div class="ek-page person-center">
    <el-card class="mt-4">
      <div class="profile-section">
        <div class="user-info">
          <div class="info-item">
            <span class="label">用户名：</span>
            <span class="value">{{ userInfo.manage_account || "-" }}</span>
          </div>
          <div class="info-item">
            <span class="label">所属部门：</span>
            <span class="value">{{ userInfo.department_name || "-" }}</span>
          </div>
          <div class="info-item">
            <span class="label">职位：</span>
            <span class="value">{{ userInfo.role_name || "-" }}</span>
          </div>
           <div class="info-item">
            <span class="label">推广二维码：</span>
            <span class="value">
                <el-button type="primary" @click="showQrCode">查看二维码</el-button>
            </span>
          </div>
        </div>
      </div>
    </el-card>

    <el-tabs v-model="activeTab" class="mt-4" >
      <!-- <el-tab-pane label="修改资料" name="profile">
        <el-card>
          <el-form :model="editForm" :rules="profileRules" ref="profileForm" label-width="120px">
            <el-form-item label="昵称" prop="user_nick">
              <el-input v-model="editForm.user_nick" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="职位" prop="user_job">
              <el-input v-model="editForm.user_job" placeholder="请输入职位" />
            </el-form-item>
            <el-form-item label="手机号" prop="user_mobile">
              <el-input v-model="editForm.user_mobile" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="邮箱" prop="user_email">
              <el-input v-model="editForm.user_email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateProfile">保存修改</el-button>
              <el-button @click="resetProfileForm">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane> -->

      <el-tab-pane label="修改密码" name="password">
        <el-card>
          <el-form
            :model="passwordForm"
            :rules="passwordRules"
            ref="passwordFormRef"
            label-width="120px"
          >
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input
                type="password"
                v-model="passwordForm.oldPassword"
                placeholder="请输入旧密码"
              />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                type="password"
                v-model="passwordForm.newPassword"
                placeholder="请输入新密码"
                show-password
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                type="password"
                v-model="passwordForm.confirmPassword"
                placeholder="请确认新密码"
                show-password
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="changePassword" :loading="loading"
                >确认修改</el-button
              >
              <el-button @click="resetPasswordForm">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <QrCode :rowId="userInfo.manage_id" v-model:visiable="visiable" @submit="confirm" v-if="userInfo.manage_id" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance } from "vue";
import { changePassword2 } from "./api";
import { useStore } from "vuex";
import QrCode from "@/views/manage/components/QrCode.vue";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekMessage, $ekLoading } = globalProperties;

// store 获取
const store = useStore();
const userInfo = computed(() => {
  return  store.state['permission']['userInfo'];
 
});

// 推广二维码弹窗
const visiable = ref(false);
const showQrCode = () => {
  visiable.value = true;
}
// 激活的标签页
const activeTab = ref("password");

// 文件输入引用
const fileInput = ref(null);

// 密码修改表单
const passwordForm = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const passwordRules = reactive({
  oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, message: "密码长度至少6位", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请确认新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});

// 表单引用
const profileForm = ref(null);
const passwordFormRef = ref(null);

const loading = ref(false);
// 修改密码
const changePassword = async () => {
  passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;
        const res = await changePassword2({
          oldPassword: passwordForm.oldPassword,
          newPassword: passwordForm.newPassword,
        });
      
        if (res.status === 'success') {
          $ekMessage.success("密码修改成功");
          // 重置密码表单
          resetPasswordForm();
        }
      } catch (error) {
        console.error("修改密码失败:", error);
        // $ekMessage.error("密码修改失败，请检查旧密码是否正确");
      } finally {
        loading.value = false;
      }
    }
  });
};
// 重置密码表单
const resetPasswordForm = () => {
  passwordForm.oldPassword = "";
  passwordForm.newPassword = "";
  passwordForm.confirmPassword = "";
  passwordFormRef.value.resetFields();
};
</script>

<style scoped lang="scss">
.person-center {
    height: 100%;
    overflow-y: auto;
    margin: 0 10px;
    width: calc(100% - 20px);
  .profile-section {
    display: flex;
    padding: 20px 0;

    .avatar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 40px;

      .avatar {
        border: 2px solid #e6e6e6;
      }
    }

    .user-info {
      flex: 1;

      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
      
        .label {
          font-weight: 500;
          width: 120px;
          color: #606266;
          text-align: left;
        }

        .value {
          color: #303133;
        }
      }
    }
  }

  :deep(.el-card__body) {
    padding: 20px;
  }

  :deep(.el-tabs__content) {
    padding: 20px 0;
  }
}
</style>
